<template>
	<view class="Global">
		<!-- 背景图片铺满 -->
		<!-- <image class="imagepage" src="/static/background@2x.png" mode=""></image> -->
		<bgImage></bgImage>

		<MyNav :title="title" bgColor="" :backIcon="isback"></MyNav>

		<!-- 搜索栏 -->
		<searchInput :inputcontent="inputcontent" @sendData="getInputValue"></searchInput>

		<!-- 筛选栏 -->
		<view class="searchPickerContent">
			<picker mode="selector" :value="hobbyValue" :range="hobbyList" range-key="name" @change="chooseHobby">
				<view class="searchPickerContentBg">
					<text class="searchPickerText">{{hobbyValue}}</text>
					<image class="searchPickerImg" src="../../../static/gongzuotai/xia_jiantou@2x.png" mode=""></image>
				</view>
			</picker>

			<picker mode="selector" :value="statusValue" :range="statusList" range-key="name" @change="chooseStatus">
				<view class="searchPickerContentBg">
					<text class="searchPickerText">{{statusValue}}</text>
					<image class="searchPickerImg" src="../../../static/gongzuotai/xia_jiantou@2x.png" mode=""></image>
				</view>
			</picker>
		</view>

		<!-- 提示信息 -->
		<view class="tipsInfo">
			<text class="tipsInfoStyle">{{tipsInfo}}</text>
			<text @click="refreshClick()" class="updateInfoStyle">{{updateInfo}}</text>
		</view>

		<!-- 列表标题 -->
		<view class="titleStyle">
			<text class="titleStyleNumT">序号</text>
			<text class="titleStyleNameT">工号</text>
			<text class="titleStyleNameT">姓名</text>
			<text class="titleStyleNameT">部门</text>
			<text class="titleStyleNameT">状态</text>
			<!-- <text class="titleStyleName">默认工价</text>
			<text class="titleStyleNum">默认</text> -->
		</view>

		<scroll-view scroll-y="true" class="titleStyleTitle" @scrolltolower="scrolltolowerClick">
			<!-- 列表内容 -->
			<view v-for="(item,index) in listSizeData" @click="listItemClick(item)">
				<view class="titleStyleList" v-if="index%2==0">
					<text class="titleStyleNum">{{item.num}}</text>
					<text class="titleStyleName">{{item.userName}}</text>
					<text class="titleStyleName">{{item.nickName}}</text>
					<text class="titleStyleName">{{item.dept.deptName}}</text>
          <text class="titleStyleName" v-if="item.status==0">在职</text>
          <text class="titleStyleName" v-if="item.status==1">离职</text>
				</view>
				<view class="titleStyleListElse" v-if="index%2!=0">
					<text class="titleStyleNum">{{item.num}}</text>
					<text class="titleStyleName">{{item.userName}}</text>
					<text class="titleStyleName">{{item.nickName}}</text>
					<text class="titleStyleName">{{item.dept.deptName}}</text>
					<text class="titleStyleName" v-if="item.status==0">在职</text>
					<text class="titleStyleName" v-if="item.status==1">离职</text>
				</view>
				<view class="line"></view>
			</view>
		</scroll-view>



		<view class="loginContent">
			<button @click="AddData()" style="color:#ffffff" class="login" type="default">{{login}}</button>
		</view>

		<!-- 点击列表弹出-->
		<uni-popup ref="popupBag" type="bottom">
			<view class="bagDetail">
        <text class="bagDetailUpadte">当前：{{listItemData.nickName}}</text>
        <view class="lineBg"></view>
				<text class="bagDetailUpadte" @click="updateData()">修改</text>
				<view class="lineBg"></view>
				<text class="bagDetailDelete" v-if="listItemData.status==0" @click="dischargeProcedure()">转离职</text>
				<view class="lineBg"></view>
				<text class="bagDetailDelete" v-if="listItemData.status==1" @click="jobTransfer()">转在职</text>
				<view class="lineBg"></view>
				<text class="bagDetailDelete" @click="deleteData()">删除</text>
				<view class="lineBg1"></view>
				<text class="bagDetailCancel" @click="close()">取消</text>
			</view>
		</uni-popup>


	</view>
</template>

<script>
	import MyNav from '@/components/customnavbar.vue'
	import bgImage from '@/components/backgroundImage.vue'
	import searchInput from '@/components/searchInput.vue'
	import {

		getUserManager,
		deleteUserManager,
		changeStatusUserManager

	} from '@/pages/api/api.js'

	export default {
		components: {
			MyNav,
			bgImage,
			searchInput
		},
		data() {
			return {
				title: '员工管理',
				isback: true,
				inputcontent: '员工姓名/工号',

				personnelInfo: '员工管理',
				tops: 0,
				height: 0,
				tarbarHeight: 0,

				tipsInfo: 'Tips：点击对应行可进行修改或删除操作',
				updateInfo: '刷新',
				login: '新增员工',

				listData: [{
						num: '1',

						title: "item1",
						name: '名称名称'
					},
					{
						num: '2',

						title: "item1",
						name: '名称名称'
					},
					{
						num: '3',

						title: "item1",
						name: '名称名'
					},
					{
						num: '4',

						title: "item1",
						name: '名称名'
					},
					{
						num: '5',

						title: "item1",
						name: '名称名'
					},
					{
						num: '7',

						title: "item1",
						name: '名称'
					}
				],

				// 列表单个数据
				listItemData: {},


				listSizeData: [],


				sizeManagerData: {
					storeId: '',
					tenantId: '',
					pageNum: '1', // 当前页
					pageSize: '10', //页码大小
				},

				// 客户爱好
				hobbyList: [{
					id: '1',
					name: '红色',
				}, {
					id: '2',
					name: '绿色',
				}, {
					id: '3',
					name: '蓝色',
				}],
				hobbyValue: '部门',

				// 员工状态 离职、在职
				statusList: [{
					id: '0',
					name: '离职',
				}, {
					id: '1',
					name: '在职',
				}, ],
				statusValue: '状态',



			}
		},
		onLoad() {
			this.loadData()
		},
    onShow() {
      // 如果是提交状态返回isRefresh=1，才刷新页面，从详情过来无需刷新
      let pages = getCurrentPages();
      let currPage = pages[pages.length - 1];
      if (currPage.__data__.isRefresh) {
        // 重新获取数据
        console.log('获取数据');

        this.reUpload()
        // 每一次需要清除，否则会参数会缓存
        currPage.__data__.isRefresh = false
      }
    },
		methods: {


			// 部门选择
			chooseHobby(e) {
				// console.log(e);
				let key = e.detail.value
				this.hobbyValue = this.hobbyList[key].name
				console.log("爱好", this.hobbyValue, e)
			},

			// 状态选择
			chooseStatus(e) {
				let key = e.detail.value
				this.statusValue = this.statusList[key].name
				console.log("1爱好", this.statusValue, e)
			},



			// 刷新数据
			refreshClick() {
				this.reUpload()
				console.log('点击刷新');
			},
			// 重置数据
			reUpload() {
				// 重置数据
				this.listSizeData = []
				// 表示自动刷新本页
				this.loadData()
			},
			//删除数据
			deleteData() {
				console.log('删除数据', this.listItemData);
				// 删除
				deleteUserManager(this.listItemData.userId).then((res) => {
					// console.log('新增数据', res);

					if (res.code == 200) {
						// 表示删除成功
						this.reUpload()

						// 关闭弹框

						this.close()

					}
					// 显示提示信息
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});

				}).catch((err) => {
					// console.log('新增失败', err);
				});
			},
			// 滚动条滚动底部
			scrolltolowerClick(e) {

				if (this.totalPage > this.sizeManagerData.pageNum) {

					++this.sizeManagerData.pageNum

					getUserManager(this.sizeManagerData).then((res) => {
						// console.log('11获取数据成功', res);
						// console.log('221滚动条触底', res.code, (res.code == 200));
						if (res.code == 200) {
							// 列表累计
							this.listSizeData = [...this.listSizeData, ...res.rows]

							//获取数据的时候foreach循环一下，添加num
							this.listSizeData.forEach((item, index) => {
								this.$set(item, 'num', index + 1)
							})

							// this.listSizeData = this.listSizeData.concat(res.rows)
						}
						/* // console.log('3221滚动条触底', this.sizeManagerData.pageNum, this.listSizeData, this.listSizeData
							.length); */
					}).catch((err) => {
						// console.error('11获取数据失败', err);
					});


				} else {

					uni.showToast({
						title: '已加载完全部数据',
						icon: 'none'
					});

				}
			},

			// 获取输入框的值
			getInputValue(e) {
				console.log('11获取输入框的值', e);
				// 员工姓名/工号
				this.sizeManagerData.userAndNice=e

				this.reUpload()

			},

			// 列表点击事件
			listItemClick(e) {

				/* uni.navigateTo({
					url: '/pages//subPack/process/processTemplateUpdate/processTemplateUpdate',
					success: res => {},
					fail: () => {},
					complete: () => {}
				}); */
				this.open(e)
			},



			// 加载数据
			loadData() {

				const app = getApp();
				this.sizeManagerData.storeId = app.globalData.storeId
				this.sizeManagerData.tenantId = app.globalData.tenantId

				// 重置
				this.sizeManagerData.pageNum = 1;

				getUserManager(this.sizeManagerData).then((res) => {
					// console.log('11获取数据成功', res);


					if (res.code == 200) {
						this.totalPage = (res.total / this.sizeManagerData.pageSize)
						if (this.totalPage > 1) {
							++this.totalPage
						}
						// 计算总页数
						this.totalPage = parseInt(this.totalPage)
						// this.listSizeData = this.listSizeData.concat(res.rows)
						this.listSizeData = [...this.listSizeData, ...res.rows]

						//获取数据的时候foreach循环一下，添加show=false
						this.listSizeData.forEach((item, index) => {
							this.$set(item, 'num', index + 1)
						})


					}
					console.log('2211获取数据成功', res, this.totalPage, this.listSizeData.length);
				}).catch((err) => {
					// console.error('11获取数据失败', err);
				});
			},

			// 新增数据
			AddData() {
				console.log('新增数据');
				uni.navigateTo({
					url: '/subPack/employeeManagement/employeeManagementAdd/employeeManagementAdd',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},


			// 转在职
			jobTransfer() {

				uni.showModal({
					title: '转在职',
					content: '确认转为在职吗?',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {

						// "status": "0" //0:在职，1:离职
						this.listItemData.status = 0
						changeStatusUserManager(this.listItemData).then((res) => {
							// console.log('新增数据', res);

							if (res.code == 200) {
								// 表示删除成功
								this.reUpload()

								// 关闭弹框

								this.close()

							}
							// 显示提示信息
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});

						}).catch((err) => {
							// console.log('新增失败', err);
						});

					},
					fail: () => {},
					complete: () => {}
				});




				/* uni.navigateTo({
					url: '/subPack/employeeManagement/dischargeProcedure/dischargeProcedure',
					success: res => {},
					fail: () => {},
					complete: () => {}
				}); */

				this.close()

			},

			// 离职办理
			dischargeProcedure() {

				uni.showModal({
					title: '离职办理',
					content: '确认离职吗?',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {

						// "status": "0" //0:在职，1:离职
						this.listItemData.status = 1
						changeStatusUserManager(this.listItemData).then((res) => {
							// console.log('新增数据', res);

							if (res.code == 200) {
								// 表示删除成功
								this.reUpload()

								// 关闭弹框

								this.close()

							}
							// 显示提示信息
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});

						}).catch((err) => {
							// console.log('新增失败', err);
						});

					},
					fail: () => {},
					complete: () => {}
				});




				/* uni.navigateTo({
					url: '/subPack/employeeManagement/dischargeProcedure/dischargeProcedure',
					success: res => {},
					fail: () => {},
					complete: () => {}
				}); */

				this.close()

			},

			// 修改数据
			updateData() {
				console.log('修改数据', this.listItemData);
				uni.navigateTo({
					url: '/subPack/employeeManagement/employeeManagementUpdate/employeeManagementUpdate?item=' +
						encodeURIComponent(JSON.stringify(this.listItemData)),
					success: res => {},
					fail: () => {},
					complete: () => {}
				});

				this.close()

			},


			// 打开弹框
			open(e) {
				console.log('点了');
				this.$refs.popupBag.open('bottom')
				console.log('列表点击事件', e);
				this.listItemData = e


			},
			// 关闭弹框
			close() {
				this.$refs.popupBag.close()
			},
			// backOnClick() {
			// 	uni.navigateBack({
			// 		delta: 1
			// 	});
			// 	console.log('点击返回');
			// }
		},
		onReady() {
			// 获取标题栏和状态栏高度
			uni.getSystemInfo({
				success: (e) => {
					this.tops = e.statusBarHeight;
					let custom = uni.getMenuButtonBoundingClientRect();
					this.height = custom.height + (custom.top - e.statusBarHeight) * 2;
					this.tarbarHeight = this.tops + this.height;
				}
			})

		}
	}
</script>

<style>
	.loginContent {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 750rpx;


	}

	.login {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		width: 550rpx;
		height: 110rpx;

		border-radius: 30rpx;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		font-weight: bold;

		margin-top: 60rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);

	}

	.lineBg {
		width: 100%;
		height: 1rpx;
		background: #F9FCFF;



	}

	.lineBg1 {
		width: 100%;
		height: 20rpx;
		background: #F9FCFF;
	}

	.bagDetailCancel {
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;



	}

	.bagDetailDelete {
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: red;

	}

	.bagDetailUpadte {
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		/* border-radius: 20rpx 20rpx 0 0; */
		/* background-color: white; */
	}

	.bagDetail {
		width: 750rpx;
		height: 616rpx;
		background: #FFFFFF;
		border-radius: 55rpx 55rpx 0rpx 0rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;


		width: 750rpx;
		height: 616rpx;
		background: #FFFFFF;
		border-radius: 55rpx 55rpx 0rpx 0rpx;


	}

	.titleStyleNum {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 10%;
		height: 100%;
		font-size: 24rpx;
		color: #333333;
		padding-left: 30rpx;

		text-align: justifyLeft;
		font-style: normal;
		text-transform: none;
	}
.titleStyleNumT {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 10%;
		height: 100%;
		font-size: 24rpx;
		color: #FFF;
		padding-left: 30rpx;

		text-align: justifyLeft;
		font-style: normal;
		text-transform: none;
	}



	.titleStyleName {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 30%;
		height: 100%;
		font-size: 24rpx;
		color: #333333;


		font-style: normal;



	}

	.titleStyleNameT {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 30%;
		height: 100%;
		font-size: 24rpx;
		color: #FFF;


		font-style: normal;



	}

	.line {
		width: 690rpx;
		height: 1rpx;
		background: #F9FCFF;



	}

	.titleStyleTitle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;


		width: 690rpx;
		height: 560rpx;
		background: #EEEEEE;

	}

	.titleStyleListElse {
		display: flex;
		justify-content: center;
		align-items: center;

		width: 690rpx;
		height: 80rpx;
		background: #F9FCFF;
	}

	.titleStyleList {
		display: flex;
		justify-content: center;
		align-items: center;

		width: 690rpx;
		height: 80rpx;

	}

	.titleStyle {
		display: flex;
		justify-content: center;
		align-items: center;

		width: 690rpx;
		height: 80rpx;
		background: #0081FF;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		margin-top: 42rpx
	}



	.tipsInfo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		margin-top: 40rpx;
	}

	.tipsInfoStyle {
		font-size: 24rpx;
		color: #FF4E00;
		line-height: 80rpx;
		text-align: justifyLeft;
		font-style: normal;
		text-transform: none;
		margin-left: 30rpx;
		font-weight: 600;
	}

	.updateInfoStyle {
		width: 100rpx;
		height: 50rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);
		border-radius: 16rpx;

		margin-right: 30rpx;
		font-size: 24rpx;
		align-items: center;
		color: white;
		display: flex;
		justify-content: center;

	}


	.searchPickerText {

		margin-left: 20rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #333333;

		display: flex;
		justify-content: center;
		align-items: center;

	}

	.searchPickerImg {
		width: 20rpx;
		height: 10rpx;
		margin-right: 20rpx;

	}

	.searchPickerContentBg {
		width: 330rpx;
		height: 60rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-right: 15rpx;
		margin-left: 15rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;


	}

	.searchPickerContent {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: row;
		margin-top: 30rpx;


	}


	.searchImg {
		width: 36rpx;
		height: 36rpx;
	}

	.searchBg {
		width: 100rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		right: 30rpx;
	}

	.searchInput {

		width: 590rpx;
		height: 100%;

	}

	.searchContent {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 690rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 30rpx;



	}

	.searchContentOut {
		display: flex;
		justify-content: center;
	}
</style>
